<template>
  <div id="businessIndex" v-loading="loading">
    <div class="header">
      <el-row>
        <el-col :span="18">
          <vTreeSelectionArea
            @appEvent="getAreaNode"
            @clearEvent="clearArea"
            ref="areaChild"
            :treeData="areaData"
            :width="`${200}px`"
            class="handle-input"
          ></vTreeSelectionArea>
          <el-input v-model="sysName" placeholder="请输入系统名称"></el-input>
          <el-button @click="pageChange(1)" type="primary" icon="el-icon-search">搜 索</el-button>
          <el-button @click="reset()">重 置</el-button>
        </el-col>
        <el-col :span="6" style="text-align:right">
          <el-button
            @click="businessAdd('add')"
            type="primary"
            icon="el-icon-circle-plus-outline"
          >添 加</el-button>
          <el-upload
            class="upload-box"
            :action="$Api.operationImport"
            :on-progress="uploadProgress"
            :on-success="uploadSuccess"
            :limit="100"
            :show-file-list="false"
          >
            <el-button type="primary" icon="el-icon-download">导 入</el-button>
          </el-upload>
        </el-col>
      </el-row>
    </div>
    <div class="contentBox">
      <el-table
        :data="tableData"
        style="width:100%;"
        tooltip-effect="light"
        :show-overflow-tooltip="true"
      >
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="sysName" label="系统名称" width="360"></el-table-column>
        <el-table-column prop="deployLevel" label="部署层级"></el-table-column>
        <el-table-column prop="sysFrame" label="架构名称"></el-table-column>
        <el-table-column label="操作" width="240">
          <template slot-scope="scope">
            <el-button @click="businessAdd('edit',scope.row.id)" type="text" size="small">编辑</el-button>
            <el-button @click="businessAdd('view',scope.row.id)" type="text" size="small">查看</el-button>
            <el-button @click="showDelDialog(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="paginationBox">
        <el-pagination
          background
          @current-change="pageChange"
          @size-change="sizeChange"
          layout="total, prev, pager, next, sizes, jumper"
          :current-page="current"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!-- 删除 -->
    <el-dialog
      class="deleteDialog"
      title="删除"
      :visible.sync="deleteDialog"
      width="30%"
      :before-close="handleClose"
    >
      <span>
        <i class="el-icon-warning"></i>此操作将永久删除，是否继续？
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleDelConfirm()">确 定</el-button>
        <el-button @click="deleteDialog = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 导入结果 -->
    <ImportResult
      v-loading.fullscreen="importLoading"
      element-loading-text="正在导入中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.5)"
      ref="ImportResult"
    ></ImportResult>
  </div>
</template>

<script>
import * as commonApi from '@/api/commonApi.js';
import vTreeSelectionArea from '@/components/common/TreeSelectionArea';
import ImportResult from '@/components/page/clopedia/matter/ImportResult'
export default {
  name:'businessIndex',
  components:{ 
    ImportResult,
    vTreeSelectionArea
  },
  data(){
    return{
      loading:false,
      importLoading:false,
      current:1,
      size:10,
      total:10,
      sysName:'',
      sysCode:'',
      tableData: [],
      deleteDialog:false,
      delID:'',
      // 地区树状
      filterOption: {
        areaId:''
      }, 
      // 筛选条件
      areaData: [],
      orgData:[],
      currentRegionId:'',
    }
  },
  created(){
    this.getRegionList()
    this.initData()
  },
  methods:{
    initData(){
      let params = {
        areaId:this.filterOption.areaId,
        sysName:this.sysName,
        current:this.current,
        size:this.size
      }
      this.loading = true
      this.$get(this.$Api.operationList, params)
        .then(res => {
          this.loading = false
          if(res.data.statusCode === 200){
            this.tableData = res.data.data.records
            this.current = res.data.data.current
            this.size = res.data.data.size
            this.total = res.data.data.total
          }
        })
        .catch(err => {
          this.loading = false
        });
    },
    businessAdd(type, id){
      this.$router.push({
          path:'/clopedia/businessAdd',
          query:{
            type:type,
            id:id
          }
        }
      )
    },
    showDelDialog(id){
      this.deleteDialog = true
      this.delID = id
    },
    handleClose(){
      this.deleteDialog = false
    },
    handleDelConfirm(){
      // console.log(this.delID)
      this.deleteDialog = false
      this.$delete(this.$Api.delOperation,{
        params:{
          idList:this.delID
        }
      }).then(res => {
          if (res.data.statusCode == 200) {
              this.pageChange()
              this.$message({
                  type: "success",
                  message: "恭喜你，删除成功!"
              });
          } else {
              this.$message.error(res.data.msg);
          }
      })
    },
    // 正在上传文件时触发
    uploadProgress(){
      this.importLoading = true
    },
    // 导入excel之后的回调
    uploadSuccess(res){
      if(res.statusCode === 50101){// 导入有错误信息的提示
        this.$refs.ImportResult.showImportDialog(res)
      }else{
        this.$message({
          message: '导入成功！',
          type: 'success'
        })
        this.initData()
      }
      this.importLoading = false
    },
    // 清除地区筛选条件
    clearArea(){
      this.filterOption.areaId = '';
      this.currentRegionId = '';
      this.orgData=[];
    },
    // 子组件返回选中参数(区域id)
    getAreaNode(params){
      this.filterOption.areaId = params.id;
      this.currentRegionId = params.id;
    },
    // 获取地区下拉列表
    getRegionList(){
      this.areaData = [];
      commonApi.getLoginAreaTreeList().then( res=> {
        if(res.data.statusCode == '200'){
          this.areaData = res.data.data;
        } else {
          if(res.data.msg.length > 20){
            this.$message.error('服务器接口异常，请联系管理员');
          } else {
            this.$message.error(res.data.msg);
          }
        }
      })
    },
    pageChange(val){
      this.current = val
      this.initData()
    },
    sizeChange(val){
      this.size = val
      this.initData()
    },
    reset(){
      this.areaId = ''
      this.orgDeptId = ''
      this.sysName = ''
    }
  }
}
</script>

<style lang="scss">
#businessIndex {
  position: relative;
  .el-popover {
    background-color: #ccc;
    .popover-box {
      width: 76px;
      height: 84px;
      text-align: center !important;
    }
  }
  .upload-box {
    display: inline-block;
    vertical-align: top;
  }
  .button-box {
    position: absolute;
    top: -45px;
    right: 0;
    .el-button {
      height: 32px;
      padding: 6px 20px !important;
    }
  }
  .header {
    margin-bottom: 20px;
    .el-input {
      width: 200px;
      height: 36px;
    }
    .handle-input {
      width: 200px;
      float: left;
      margin-right: 3px;
    }
  }
  .contentBox {
    .el-table {
      min-height: 65vh !important;
      .el-button {
        padding: 0;
      }
    }
  }
}
.el-dropdown-link {
  color: #409eff;
  cursor: pointer;
  margin-left: 10px;
}
.el-dropdown-menu {
  padding: 5px 0;
  .el-dropdown-menu__item {
    line-height: 30px;
  }
}
.el-popper[x-placement^="bottom"] {
  margin: 3px;
}
</style>